import React from "react";
import staffList from "./DetailDrawForm/staffList";
import {
  Button,
  Col,
  DatePicker,
  Divider,
  Form,
  Input,
  Row,
  Select,
} from "antd";
import PopoverSelect from "@/components/_PopoverSelect";
import dayjs from "dayjs";

const AddUser = ({ raload }: any) => {
  const [form] = Form.useForm();

  const ComponentMap = {
    input: (item: any) => {
      return <Input placeholder={item.itemPlaceholder}></Input>;
    },
    select: (item: any) => {
      return (
        <Select placeholder={item.itemPlaceholder}>
          {item.itemOptions.map((option: any) => (
            <Select.Option key={option.value} value={option.value}>
              {option.label}
            </Select.Option>
          ))}
        </Select>
      );
    },
    date: (item) => {
      return (
        <DatePicker
          placeholder={item.itemPlaceholder}
          className="w-full"
        ></DatePicker>
      );
    },
    popover: (item) => {
      return (
        <PopoverSelect
          placeholder={item.itemPlaceholder}
          onChange={(value) => {
            // console.log(value);
            if (item.itemName === "departmentName") {
              form.setFieldValue("department", value);
            }
            // console.log(form.getFieldsValue(), "form.getFieldsValue()");
          }}
        ></PopoverSelect>
      );
    },
  };

  function handleSubmit(values: any) {
    // console.log(values, "values");
    raload({
      ...values,
      entryTime: dayjs(values.entryTime).format("YYYY-MM-DD"),
      key: Date.now(),
    });
  }

  return (
    <Form form={form} layout="vertical" onFinish={handleSubmit}>
      {/* <Row justify={"space-between"}>
    <Col span={11}>11</Col>
    <Col span={11}>111</Col>
  </Row> */}
      {staffList.map((item, index) => {
        return (
          <Row justify={"space-between"} key={index}>
            {item.map((col, colIndex) => {
              return (
                <Col
                  span={11}
                  key={colIndex}
                  style={col.style as React.CSSProperties}
                >
                  <Form.Item
                    label={col.itemLabel}
                    name={col.itemName}
                    rules={col.itemRules}
                  >
                    {ComponentMap[col.renderType as keyof typeof ComponentMap](
                      col
                    )}
                  </Form.Item>
                </Col>
              );
            })}
          </Row>
        );
      })}
      <Divider />
      <Row justify={"end"}>
        <Col>
          <Button htmlType="submit">提交</Button>
        </Col>
      </Row>
    </Form>
  );
};

export default AddUser;
